<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>新建运单 - 雁农冷链平台</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<!-- 所需样式 -->
	<link rel="stylesheet" href="../../static/kj/element-ui/theme-chalk/index.css">
	<link rel="stylesheet" href="../../static/sa.css">
	<style>
		.waybill-form {
			padding: 20px;
			background: #fff;
			border-radius: 8px;
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		}
		.form-section {
			margin-bottom: 30px;
			padding: 20px;
			border: 1px solid #e4e7ed;
			border-radius: 6px;
		}
		.section-title {
			font-size: 16px;
			font-weight: bold;
			color: #303133;
			margin-bottom: 15px;
			border-left: 4px solid #409eff;
			padding-left: 10px;
		}
		.temperature-monitor {
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			color: white;
			padding: 15px;
			border-radius: 8px;
			margin-top: 20px;
		}
	</style>
</head>
<body>
	<div id="app">
		<div class="waybill-form">
			<h2 style="margin-bottom: 30px; color: #303133;">
				<i class="el-icon-document"></i> 新建运单
			</h2>
			
			<!-- 基本信息 -->
			<div class="form-section">
				<div class="section-title">基本信息</div>
				<el-form :model="waybillForm" label-width="120px">
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="运单号">
								<el-input v-model="waybillForm.waybillNo" placeholder="系统自动生成" disabled></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="运输类型">
								<el-select v-model="waybillForm.transportType" placeholder="请选择运输类型">
									<el-option label="冷藏运输" value="refrigerated"></el-option>
									<el-option label="冷冻运输" value="frozen"></el-option>
									<el-option label="常温运输" value="normal"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="发货日期">
								<el-date-picker v-model="waybillForm.shipDate" type="datetime" placeholder="选择发货时间"></el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="预计到达">
								<el-date-picker v-model="waybillForm.arrivalDate" type="datetime" placeholder="预计到达时间"></el-date-picker>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
			
			<!-- 货物信息 -->
			<div class="form-section">
				<div class="section-title">货物信息</div>
				<el-form :model="waybillForm" label-width="120px">
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="货物名称">
								<el-input v-model="waybillForm.goodsName" placeholder="请输入货物名称"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="货物类别">
								<el-select v-model="waybillForm.goodsCategory" placeholder="请选择货物类别">
									<el-option label="生鲜蔬菜" value="vegetables"></el-option>
									<el-option label="肉类制品" value="meat"></el-option>
									<el-option label="水产海鲜" value="seafood"></el-option>
									<el-option label="乳制品" value="dairy"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="8">
							<el-form-item label="重量(kg)">
								<el-input-number v-model="waybillForm.weight" :min="0" :precision="2"></el-input-number>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="体积(m³)">
								<el-input-number v-model="waybillForm.volume" :min="0" :precision="2"></el-input-number>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="件数">
								<el-input-number v-model="waybillForm.quantity" :min="1"></el-input-number>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
			
			<!-- 温度要求 -->
			<div class="form-section">
				<div class="section-title">温度要求</div>
				<el-form :model="waybillForm" label-width="120px">
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="目标温度(°C)">
								<el-input-number v-model="waybillForm.targetTemp" :min="-30" :max="30" :precision="1"></el-input-number>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="温度范围">
								<el-input v-model="waybillForm.tempRange" placeholder="如：-18°C ~ -15°C"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
				<div class="temperature-monitor">
					<i class="el-icon-thermometer"></i>
					<strong>温度监控提醒：</strong>
					运输过程中将实时监控温度变化，如有异常将立即通知相关人员
				</div>
			</div>
			
			<!-- 地址信息 -->
			<div class="form-section">
				<div class="section-title">地址信息</div>
				<el-form :model="waybillForm" label-width="120px">
					<el-row :gutter="20">
						<el-col :span="12">
							<h4 style="color: #409eff; margin-bottom: 15px;">发货地址</h4>
							<el-form-item label="发货人">
								<el-input v-model="waybillForm.senderName" placeholder="请输入发货人姓名"></el-input>
							</el-form-item>
							<el-form-item label="联系电话">
								<el-input v-model="waybillForm.senderPhone" placeholder="请输入联系电话"></el-input>
							</el-form-item>
							<el-form-item label="详细地址">
								<el-input v-model="waybillForm.senderAddress" type="textarea" placeholder="请输入详细地址"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<h4 style="color: #67c23a; margin-bottom: 15px;">收货地址</h4>
							<el-form-item label="收货人">
								<el-input v-model="waybillForm.receiverName" placeholder="请输入收货人姓名"></el-input>
							</el-form-item>
							<el-form-item label="联系电话">
								<el-input v-model="waybillForm.receiverPhone" placeholder="请输入联系电话"></el-input>
							</el-form-item>
							<el-form-item label="详细地址">
								<el-input v-model="waybillForm.receiverAddress" type="textarea" placeholder="请输入详细地址"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
			
			<!-- 操作按钮 -->
			<div style="text-align: center; margin-top: 30px;">
				<el-button size="large" @click="resetForm">重置</el-button>
				<el-button size="large" @click="saveAsDraft">保存草稿</el-button>
				<el-button type="primary" size="large" @click="submitWaybill">
					<i class="el-icon-check"></i> 创建运单
				</el-button>
			</div>
		</div>
	</div>
	
	<!-- 所需js -->
	<script src="../../static/kj/vue.min.js"></script>
	<script src="../../static/kj/element-ui/index.js"></script>
	<script src="../../static/sa.js"></script>
	<script>
		var app = new Vue({
			el: '#app',
			data: {
				waybillForm: {
					waybillNo: 'WB' + new Date().getTime(),
					transportType: '',
					shipDate: '',
					arrivalDate: '',
					goodsName: '',
					goodsCategory: '',
					weight: 0,
					volume: 0,
					quantity: 1,
					targetTemp: -18,
					tempRange: '',
					senderName: '',
					senderPhone: '',
					senderAddress: '',
					receiverName: '',
					receiverPhone: '',
					receiverAddress: ''
				}
			},
			methods: {
				submitWaybill() {
					// 表单验证
					if (!this.waybillForm.transportType) {
						this.$message.warning('请选择运输类型');
						return;
					}
					if (!this.waybillForm.goodsName) {
						this.$message.warning('请输入货物名称');
						return;
					}
					if (!this.waybillForm.senderName || !this.waybillForm.receiverName) {
						this.$message.warning('请填写发货人和收货人信息');
						return;
					}
					
					// 模拟提交
					this.$message.success('运单创建成功！运单号：' + this.waybillForm.waybillNo);
					console.log('运单数据：', this.waybillForm);
				},
				saveAsDraft() {
					this.$message.success('草稿保存成功');
					console.log('保存草稿：', this.waybillForm);
				},
				resetForm() {
					this.$confirm('确定要重置表单吗？', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.waybillForm = {
							waybillNo: 'WB' + new Date().getTime(),
							transportType: '',
							shipDate: '',
							arrivalDate: '',
							goodsName: '',
							goodsCategory: '',
							weight: 0,
							volume: 0,
							quantity: 1,
							targetTemp: -18,
							tempRange: '',
							senderName: '',
							senderPhone: '',
							senderAddress: '',
							receiverName: '',
							receiverPhone: '',
							receiverAddress: ''
						};
						this.$message.success('表单已重置');
					});
				}
			}
		});
	</script>
</body>
</html>